<template>
	<view class="login-outer-wrapper" :style="{backgroundImage:'url('+PictureUrl+'bg-login.png)'}">
		<div class="empty3"></div>
		<div class="app-name">
			<image class="image" :src="PictureUrl+'logo.png'" mode="aspectFit"></image>
		</div>
		<div class="login-form">
			<div class="item-wrapper">
				<image class="icon" src="/static/icon-username.png" mode="aspectFit"></image>
				<div class="input-wrapper">
					<input class="input" placeholder-style="color:#ffffff76" type="text" v-model="phone"
						placeholder="手机号码" value="" />
				</div>
			</div>
			<div class="item-wrapper">
				<image class="icon" src="/static/icon-password.png" mode="aspectFit"></image>
				<div class="input-wrapper" v-if="passwordType === 'type'">
					<input class="input" placeholder-style="color:#ffffff76" type="text" v-model="password"
						placeholder="登录密码" />
				</div>
				<div class="input-wrapper" v-else>
					<input class="input" placeholder-style="color:#ffffff76" type="password" v-model="password"
						placeholder="登录密码" />
				</div>
				<image v-if="passwordType === 'type'" @click="passwordType = 'password'" class="icon"
					src="/static/show-password.png" mode="aspectFit"></image>
				<image v-if="passwordType === 'password'" @click="passwordType = 'type'" class="icon"
					src="/static/hide-password.png" mode="aspectFit"></image>
			</div>
			<div class="operate-wrapper">
				<div class="item" @click="navigateTo('/pages/moduleLogin/find-password/find-password')">
					忘记密码
				</div>
			</div>
		</div>
		<div class="empty2"></div>
		<div class="submit-wrapepr">
			<button class="button" :class="{ 'btn-active': isActive }" @click="loginApp" :disabled="btnLoading"
				type="default">
				登录
			</button>
		</div>
		<div class="empty1"></div>
		<login-wechat page="login"></login-wechat>
		<popup-tip ref="pupuptip" image="none" subTitle="您还不是平台用户,注册后才能正常使用" confirmText="去注册"
			@popupConfirm="popupConfirm">
		</popup-tip>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex"
	import {
		Login
	} from "@/api/login.js";
	import {
		LoginSuccess
	} from "@/utils/filter.js"
	import {
		mobile
	} from "@/utils/RegExp.js";
	import storage from "@/utils/storage.js";
	import LoginWechat from "@/components/login-wechat.vue";
	import PopupTip from "@/components/popup-tip.vue"
	export default {
		components: {
			LoginWechat,
			PopupTip
		},
		data() {
			return {
				passwordType: "password",
				phone: "",
				password: "",
				btnLoading: false
			};
		},
		watch: {
			passwordType(val) {
				console.log(val)
			}
		},
		computed: {
			...mapGetters(['PictureUrl']),
			isActive() {
				if (this.password.replace(/\s+/g, "") && this.phone.replace(/\s+/g, "")) {
					return true
				} else {
					return false
				}
			}
		},
		onLoad() {},
		methods: {
			...mapMutations(["SetUserInfo"]),
			...mapActions(["ActionUserList"]),
			// 密码输入
			handleInput(val) {
				this.password = val.replace(/\s+/g, "");
			},
			// 登录
			loginApp() {
				let that = this
				if (!this.isActive) return
				if (this.phone.replace(/\s+/g, "") === "") {
					uni.$u.toast("请输入手机号码");
					return;
				}
				if (mobile.test(this.phone) === false) {
					uni.$u.toast("手机号码格式不正确");
					return;
				}
				if (this.password.replace(/\s+/g, "") === "") {
					uni.$u.toast("请输入密码");
					this.password = ''
					return;
				}
				this.btnLoading = true;
				Login({
						uphone: this.phone,
						password: this.password
					})
					.then((res) => {
						console.log(res)
						if (res.data.code === 200) {
							let info = res.data.data
							this.ActionUserList({
								type: "login",
								...info
							})
						} else {
							this.$refs.pupuptip.tipshow = true
						}
						this.btnLoading = false;
					})
					.catch((err) => {
						this.btnLoading = false;
					});
			},
			popupConfirm() {
				uni.redirectTo({
					url: "/pages/moduleLogin/register/register"
				})
			},
			navigateTo(url) {
				uni.navigateTo({
					url,
				});
			},
		},
	};
</script>

<style lang="scss">
	@import "@/utils/variable.scss";

	.login-outer-wrapper {
		height: 100vh;
		background-size: cover;
		background-position: center;
		padding: 0 50upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.empty3 {
			flex: 3;
		}

		.empty2 {
			flex: 2;
		}

		.empty1 {
			flex: 1;
		}

		.app-name {
			text-align: center;
			font-size: 50upx;
			color: #ffffff;
			font-weight: bold;
			margin-bottom: 120upx;

			.image {
				width: 300upx;
				height: 300upx;
			}
		}

		.login-form {
			.item-wrapper {
				height: 88upx;
				display: flex;
				align-items: center;
				background-color: #ffffff64;
				border-radius: 88upx;
				margin-bottom: 32upx;

				.icon {
					width: 40upx;
					height: 40upx;
					margin: 0 40upx;
					padding: 12upx;
				}

				.input-wrapper {
					flex: 1;
					border-left: 1upx solid #ffffff86;
					padding: 0 40upx;

					.input {
						color: rgba(20, 104, 92, 1);
					}
				}
			}

			.operate-wrapper {
				display: flex;
				justify-content: flex-end;

				.item {
					color: rgba(0, 144, 132, 0.82);
					display: flex;

					.circle {
						width: 28upx;
						width: 28upx;
						border: 2upx solid rgba(0, 144, 132, 0.82);
					}
				}
			}
		}

		.submit-wrapepr {
			.button {
				color: #6eebd9;
				background: linear-gradient(to left, #72d7cc96, #28cfb396);
				box-shadow: 0 0 15upx 8upx #81d8cf70;
				letter-spacing: 16upx;

				&:after {
					border: 2upx #6adab7;
				}
			}

			.btn-active {
				background: linear-gradient(-36deg,
						rgba(114, 215, 204, 0.6),
						rgba(40, 207, 179, 0.6));
				color: #fff;
			}
		}
	}

	.agreement {
		color: rgba(0, 144, 132, 0.82);
		display: flex;
		align-items: center;
		height: 40upx;
		line-height: 40upx;
		margin-top: 32upx;

		.circle {
			width: 28upx;
			height: 28upx;
			border: 2upx solid rgba(0, 144, 132, 0.82);
			box-sizing: border-box;
			border-radius: 28upx;
			margin-right: 8upx;

			&.check {
				background-color: rgba(0, 144, 132, 0.82);
				color: #ffffff;
				position: relative;

				&::after {
					content: "√";
					font-size: 24upx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}

	.input {
		width: 100%;
		border: none;
		background-color: transparent;

		&:focus {
			outline: none;
		}

		&::placeholder {
			color: #ffffff76;
		}
	}
</style>
